<template>
  <div class="weui-panel">
    <!-- <Weui-search-bar @search="search"></Weui-search-bar> -->
    <div class="weui-tab">
      <div class="weui-tab__bd">
        <div class="weui-tab__bd-item weui-tab__bd-item--active" style="margin-top: 0;" ref="list">
          <div class="weui-cell weui-flex list-title">
            <div class="weui-flex__item" v-for="(t, index) in listTitle" :key="index">{{t}}</div>
          </div>

          <div class="weui-cell weui-flex" v-for="(source, index) in listData" :key="index">
            <div class="weui-flex__item">
              <img class="list-user-img" :src="source.headUrl" alt="">
            </div>
            <div class="weui-flex__item">
              <p>{{source.lftid}}</p>
            </div>
              <!-- <img src="img/diamonds-b.png" alt="" class="sell-diamonds"> -->
            <!--<span style="color: red">{{source.totalCount}}</span>-->
            <div class="weui-flex__item">
              <!-- <a class="weui-btn weui-btn_mini weui-btn_primary" @click="gotoHistory(source)">{{source.totalCount}}</a> -->
              <p class="nickname-text">{{source.nickname}}</p>
            </div>
            <div class="weui-flex__item">
              <p>{{source.monthCount}}</p>
            </div>
          </div>

          <div class="no-data" v-show="showNoData">暂无数据</div>

          <div class="weui-loadmore" v-show="loading">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
          </div>

        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
import WeuiSearchBar from '../components/WeuiSearchBar'
import { mapState } from 'Vuex'
export default {
  data() {
    return {
      // '本月消费','总共消费'
      listTitle: ['头像', 'ID', '昵称', '本月消费'],
      listData: [],
      offset: 0,
      limit: 500,
      noMore: false,
      loading: false,
      searchText: '',
      hideBP: true
    }
  },
  props: {
  },
  mounted() {
    // this.fakeData()
    this.hideBP = window.hideBP
    this.query()
    // this.initInfinite()
  },
  methods: {
    toTwoFifth(val) {
      if(this.hideBP) {
        return val;
      } else {
        return Math.ceil(val * 2 / 5);
      }
    },
    fakeData() {
      this.listData = [{level: '3'}, {level: '3'}, {level: '3'}, {level: '3'}, {level: '3'}, {level: '3'}, {level: '3'}, {level: '3'}, {level: '3'}, {level: '3'}]
    },
    initInfinite() {
      const listHeight = document.body.offsetHeight - 54 + 'px'
      Object.assign(this.$refs.list.style, { height: listHeight, 'overflow-y': 'auto' })
      $(this.$refs.list).infinite().on('infinite', () => {
        if (this.loading) {
          return
        }
        this.offset += this.limit
        this.query()
      });
    },
    search(text) {
      console.log(text)
      this.searchText = text
      this.listData.length = 0
      if (this.noMore) {
        this.initInfinite()
        this.noMore = false
      }
      this.query()
    },
    gotoHistory(source) {
      window.btn_sound.play();
      this.$router.push({path: 'playerPayment', query: { id: source.lftid }})
    },
    query() {
      const send = { token: this.token, areaCode: this.areaCode, lftid: this.searchText, limit: this.limit, offset: this.offset }
      this.loading = true
      this.api.myPlayers.getPlayers(send).then(res => res.json()).then(data => {
        console.log(data)
        this.loading = false
        if (data.errorCode) {
          $(this.$refs.list).destroyInfinite()
          return
        }
        this.noMore = data.source.length === 0
        if (this.noMore) {
          $(this.$refs.list).destroyInfinite()
        }
        this.listData = this.listData.concat(data.source)
      })
    }
  },
  computed: {
    ...mapState(['api', 'token', 'areaCode']),
    showNoData() {
      return !this.listData.length && !this.loading
    }
  },
  components: {
    WeuiSearchBar
  }
}

</script>

<style lang="less">
  .no-data {
    text-align: center;
    background: #fff;
  }
  .red-sm-btn {
    color: red;
    border: 1px solid #eee;
    border-radius: 5px;
  }
</style>